<template>
  <div
    class="container-fluid header"
    :style="{ backgroundColor: changeBC ? '#fff' : '' }"
    @mouseenter="changeBC = true"
    @mouseleave="changeBC = false"
  >
    <div class="row">
      <!-- 1、商品分类图标 -->
      <div class="col-1 col-md-1">
        <el-button @click="drawer = true" type="text">
          <div class="categoryIcon"><i class="iconfont icon-fenlei"></i></div>
        </el-button>

        <el-drawer
          title="商品分类"
          style="color:black"
          :visible.sync="drawer"
          direction="ltr"
          :modal="modal"
        >
          <div class="drawerList" @click="goSearch">
            <div
              class="cateList"
              v-for="(category, index) in categoryLit"
              :key="category.id"
            >
              <p>
                <a
                  href="javaScript:;"
                  :data-categoryName="category.name"
                  @mouseenter="ulcur = category.id"
                  >{{ category.name }}</a
                >
              </p>
              <div
                class="cateSmallList"
                :style="{ display: category.id == ulcur ? 'block' : 'none' }"
              >
                <ul>
                  <li
                    v-for="smallCategory in category.categoryList"
                    :key="smallCategory.id"
                  >
                    <a
                      href="javaScript:;"
                      :data-categoryName="smallCategory.name"
                      >{{ smallCategory.name }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>

      <!-- 2、LOGO图标 -->
      <div class="col-3 col-md-3 order-1 order-md-0 logo">
        <a @click="logoEvent"><img src="./image/logo.png" /></a>
      </div>
      <!-- 3、搜索框 -->
      <div class="col-8 col-md-6 search">
        <div class="searchBox">
          <i class="iconfont icon-icon_sousuo" @click="goSearch"></i>
          <input type="text" placeholder="输入关键字" v-model="searchTxt" />
        </div>
      </div>
      <!-- 4、登录/帮助/购物车 -->
      <div class="col-md-2 d-md-block d-none moreIcon">
        <i
          class="iconfont icon-denglu-copy"
          @mouseenter="persenCur = !persenCur"
          @mouseleave="persenCur = !persenCur"
        >
          <div class="percenList" v-show="persenCur">
            <div class="jiao"></div>
            <ul v-show="!this.$store.state.login.token">
              <li><router-link to="/login">登录</router-link></li>
              <li><router-link to="/login">注册</router-link></li>
            </ul>
            <ul v-show="this.$store.state.login.token">
              <li><router-link to="/center">个人中心</router-link></li>
              <li @click="clearToken">
                <a href="javascript:;">退出登录</a>
              </li>
            </ul>
          </div></i
        >
        <i class="iconfont icon-bangzhu"></i>
        <i class="iconfont icon-31gouwuche" @click="goCart"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      drawer: false,
      modal: false,
      //商品分类移动换背景色
      ulcur: "001",
      //搜索框文本内容
      searchTxt: "",

      //个人账户弹窗
      persenCur: false,
      loginCur: false,
      layoutCur: false,
      //改变背景颜色
      changeBC: false,
    };
  },
  mounted() {
    this.$store.dispatch("getCategory");
  },
  computed: {
    ...mapState({
      categoryLit: (state) => state.header.categoryList,
    }),
  },
  methods: {
    //点击商品分类(query)和搜索(params)带参跳转
    goSearch(event) {
      let targetNode = event.target;
      //获取触发事件节点的自定义属性【a:data-categoryName】
      let { categoryname } = targetNode.dataset;
      let keyword = this.searchTxt;
      //搜索框传参
      let location = {
        name: "goodsShow",
        query: { pageNo: 1 },
      };
      if (categoryname || this.$route.query.categoryname) {
        location.query.categoryname = categoryname
          ? categoryname
          : this.$route.query.categoryname;
      }
      if (keyword || this.$route.query.keyword) {
        location.query.keyword = keyword ? keyword : this.$route.keyword;
      }
      this.$router.push(location);
      this.$store.dispatch("getGoodsShow");
      this.drawer = false;
    },
    logoEvent() {
      this.$router.push("/home");
    },
    goCart() {
      this.$router.push("/shopCart");
    },
    clearToken() {
      localStorage.removeItem("token");
      localStorage.removeItem("nickname");
      localStorage.removeItem("imgUrl");
      location.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  z-index: 9999;
  background: none;
}
.drawerList {
  position: relative;
  height: 100%;
  p {
    font-size: 1.5vw;
  }
  a {
    color: black;
    text-decoration: none;
  }
  .cateSmallList {
    display: none;
    overflow: hidden;
    background-color: pink;
    ul {
      padding-left: 0;
      position: absolute;
      top: 0;
      left: 30%;
      width: 500%;
      height: 100%;
      font-size: 1.3vw;
      border-left: 1px solid rgb(135, 135, 135);
      box-shadow: inset 0px 0px 10px rgb(105, 105, 105);
      li {
        margin-top: 4px;
        padding: 5px 5px;
      }
    }
  }
}
i {
  font-size: 2vw;
  color: #5e4641;
}
.logo {
  display: flex;
  align-items: center;
  img {
    width: 77%;
  }
}
.search {
  display: flex;
  justify-content: center;
  align-items: center;
  .searchBox {
    width: 88%;
    font-size: 2vwm;
    border-bottom: 1px solid #333;
    i {
      clear: both;
    }
    input {
      border: none;
      outline: none;
      background: none;
    }
  }
}
.moreIcon {
  margin: auto 0;
  .icon-denglu-copy{
    position: relative;
    .percenList {
      position: absolute;
      top:23px;
      .jiao {
        width: 0px;
        height: 0px;
        margin-left: 7px;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-top: 7px solid transparent;
        border-bottom: 7px solid rgb(88, 88, 88);
      }
      ul {
        width: auto;
        margin-top: 0;
        padding: 4px;
        border-radius: 10px;
        background-color: rgb(88, 88, 88);
        li {
          width: 50px;
          margin: 4px;
          line-height: 18px;
          font-size: 12px;
          a {
            text-decoration: none;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
  i {
    margin: 0 3px;
    
  }
}
</style>
